<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html{
            margin:0;
            padding:0;
        }
        .control{
            position: fixed;
            top:0;
            bottom:0;
            right:0;
            left:0;
            margin: auto;
            width:100px;
            height: 100px;
            background-color:royalblue;
        }
        .content{
            height: 1500px;
            width: 1500px;
            border:1px solid darkred;
        }
    </style>
</head>
<body>
<div class="control">
    <input type="button" value="testScrollBy" onclick="testScrollBy()">
    <br/>
    <input type="button" value="testScrollTo" onclick="testScrollTo()">
    <br/>
    <input type="button" value="testScroll" onclick="testScroll()">
    <br/>
    <button onclick="scrollToOptions()">scrollToOptions</button>
</div>
<div class="content">
    <div class="item">这是内容1</div>
    <div class="item">这是内容2</div>
    <div class="item">这是内容3</div>
    <div class="item">这是内容4</div>
    <div class="item">这是内容5</div>
    <div class="item">这是内容6</div>
    <div class="item">这是内容7</div>
    <div class="item">这是内容8</div>
    <div class="item">这是内容9</div>
    <div class="item">这是内容10</div>
    <div class="item">这是内容11</div>
    <div class="item">这是内容12</div>
    <div class="item">这是内容13</div>
    <div class="item">这是内容14</div>
    <div class="item">这是内容15</div>
    <div class="item">这是内容16</div>
    <div class="item">这是内容17</div>
    <div class="item">这是内容18</div>
    <div class="item">这是内容19</div>
    <div class="item">这是内容20</div>
    <div class="item">这是内容21</div>
    <div class="item">这是内容22</div>
    <div class="item">这是内容23</div>
    <div class="item">这是内容24</div>
    <div class="item">这是内容25</div>
    <div class="item">这是内容26</div>
    <div class="item">这是内容27</div>
    <div class="item">这是内容28</div>
    <div class="item">这是内容29</div>
    <div class="item">这是内容30</div>
    <div class="item">这是内容31</div>
    <div class="item">这是内容32</div>
    <div class="item">这是内容33</div>
    <div class="item">这是内容34</div>
    <div class="item">这是内容35</div>
    <div class="item">这是内容36</div>
    <div class="item">这是内容37</div>
    <div class="item">这是内容38</div>
    <div class="item">这是内容39</div>
    <div class="item">这是内容40</div>
    <div class="item">这是内容41</div>
    <div class="item">这是内容42</div>
    <div class="item">这是内容43</div>
    <div class="item">这是内容44</div>
    <div class="item">这是内容45</div>
    <div class="item">这是内容46</div>
    <div class="item">这是内容47</div>
    <div class="item">这是内容48</div>
    <div class="item">这是内容49</div>
    <div class="item">这是内容50</div>
    <div class="item">这是内容51</div>
    <div class="item">这是内容52</div>
    <div class="item">这是内容53</div>
    <div class="item">这是内容54</div>
    <div class="item">这是内容55</div>
    <div class="item">这是内容56</div>
    <div class="item">这是内容57</div>
    <div class="item">这是内容58</div>
    <div class="item">这是内容59</div>
    <div class="item">这是内容60</div>
    <div class="item">这是内容61</div>
    <div class="item">这是内容62</div>
    <div class="item">这是内容63</div>
    <div class="item">这是内容64</div>
    <div class="item">这是内容65</div>
    <div class="item">这是内容66</div>
    <div class="item">这是内容67</div>
    <div class="item">这是内容68</div>
    <div class="item">这是内容69</div>
    <div class="item">这是内容70</div>
    <div class="item">这是内容71</div>
    <div class="item">这是内容72</div>
    <div class="item">这是内容73</div>
    <div class="item">这是内容74</div>
    <div class="item">这是内容75</div>
    <div class="item">这是内容76</div>
    <div class="item">这是内容77</div>
    <div class="item">这是内容78</div>
    <div class="item">这是内容79</div>
    <div class="item">这是内容80</div>
    <div class="item">这是内容81</div>
    <div class="item">这是内容82</div>
    <div class="item">这是内容83</div>
    <div class="item">这是内容84</div>
    <div class="item">这是内容85</div>
    <div class="item">这是内容86</div>
    <div class="item">这是内容87</div>
    <div class="item">这是内容88</div>
    <div class="item">这是内容89</div>
    <div class="item">这是内容90</div>
    <div class="item">这是内容91</div>
    <div class="item">这是内容92</div>
    <div class="item">这是内容93</div>
    <div class="item">这是内容94</div>
    <div class="item">这是内容95</div>
    <div class="item">这是内容96</div>
    <div class="item">这是内容97</div>
    <div class="item">这是内容98</div>
    <div class="item">这是内容99</div>
    <div class="item">这是内容100</div>
    <div class="item">这是内容101</div>
    <div class="item">这是内容102</div>
    <div class="item">这是内容103</div>
    <div class="item">这是内容104</div>
    <div class="item">这是内容105</div>
    <div class="item">这是内容106</div>
    <div class="item">这是内容107</div>
    <div class="item">这是内容108</div>
    <div class="item">这是内容109</div>
    <div class="item">这是内容110</div>
    <div class="item">这是内容111</div>
    <div class="item">这是内容112</div>
    <div class="item">这是内容113</div>
    <div class="item">这是内容114</div>
    <div class="item">这是内容115</div>
    <div class="item">这是内容116</div>
    <div class="item">这是内容117</div>
    <div class="item">这是内容118</div>
    <div class="item">这是内容119</div>
    <div class="item">这是内容120</div>
    <div class="item">这是内容121</div>
    <div class="item">这是内容122</div>
    <div class="item">这是内容123</div>
    <div class="item">这是内容124</div>
    <div class="item">这是内容125</div>
    <div class="item">这是内容126</div>
    <div class="item">这是内容127</div>
    <div class="item">这是内容128</div>
    <div class="item">这是内容129</div>
    <div class="item">这是内容130</div>
    <div class="item">这是内容131</div>
    <div class="item">这是内容132</div>
    <div class="item">这是内容133</div>
    <div class="item">这是内容134</div>
    <div class="item">这是内容135</div>
    <div class="item">这是内容136</div>
    <div class="item">这是内容137</div>
    <div class="item">这是内容138</div>
    <div class="item">这是内容139</div>
    <div class="item">这是内容140</div>
    <div class="item">这是内容141</div>
    <div class="item">这是内容142</div>
    <div class="item">这是内容143</div>
    <div class="item">这是内容144</div>
    <div class="item">这是内容145</div>
    <div class="item">这是内容146</div>
    <div class="item">这是内容147</div>
    <div class="item">这是内容148</div>
    <div class="item">这是内容149</div>
    <div class="item">这是内容150</div>
    <div class="item">这是内容151</div>
    <div class="item">这是内容152</div>
    <div class="item">这是内容153</div>
    <div class="item">这是内容154</div>
    <div class="item">这是内容155</div>
    <div class="item">这是内容156</div>
    <div class="item">这是内容157</div>
    <div class="item">这是内容158</div>
    <div class="item">这是内容159</div>
    <div class="item">这是内容160</div>
    <div class="item">这是内容161</div>
    <div class="item">这是内容162</div>
    <div class="item">这是内容163</div>
    <div class="item">这是内容164</div>
    <div class="item">这是内容165</div>
    <div class="item">这是内容166</div>
    <div class="item">这是内容167</div>
    <div class="item">这是内容168</div>
    <div class="item">这是内容169</div>
    <div class="item">这是内容170</div>
    <div class="item">这是内容171</div>
    <div class="item">这是内容172</div>
    <div class="item">这是内容173</div>
    <div class="item">这是内容174</div>
    <div class="item">这是内容175</div>
    <div class="item">这是内容176</div>
    <div class="item">这是内容177</div>
    <div class="item">这是内容178</div>
    <div class="item">这是内容179</div>
    <div class="item">这是内容180</div>
    <div class="item">这是内容181</div>
    <div class="item">这是内容182</div>
    <div class="item">这是内容183</div>
    <div class="item">这是内容184</div>
    <div class="item">这是内容185</div>
    <div class="item">这是内容186</div>
    <div class="item">这是内容187</div>
    <div class="item">这是内容188</div>
    <div class="item">这是内容189</div>
    <div class="item">这是内容190</div>
    <div class="item">这是内容191</div>
    <div class="item">这是内容192</div>
    <div class="item">这是内容193</div>
    <div class="item">这是内容194</div>
    <div class="item">这是内容195</div>
    <div class="item">这是内容196</div>
    <div class="item">这是内容197</div>
    <div class="item">这是内容198</div>
    <div class="item">这是内容199</div>
    <div class="item">这是内容200</div>
</div>
</body>
<script>
    /**
     * 视口位置
     * 1.浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。
     *   度量文档相对于视口滚动距离的属性有两对，返回相等的值.
     * 2.window.pageXOffset/window.pageYOffset 和 window.scrollX/window.scrollY
     * 3.可以使用 scroll()、scrollTo()和 scrollBy()方法滚动页面. 3个方法都接收表示相对视口距
         离的 x 和 y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。
     *
     */
    //1.视口的宽度和高度
    let viewWidth = window.innerWidth;
    let viewHeight = window.innerHeight;
    if( typeof  viewWidth !== 'number'){
        console.log('document.compatMode:'+document.compatMode)
        if(document.compatMode === 'CSS1Compat '){
            viewWidth = document.documentElement.clientWidth;
            viewHeight = document.documentElement.clientHeight
        } else {
            viewWidth = document.body.clientWidth;
            viewHeight = document.body.clientHeight;
        }
    }
    console.log('viewWidth--》'+viewWidth);
    console.log('viewHeight--》'+viewHeight);
    //2.文档相对于视口滚动距离,注意这里的值都是相当于视口也就是可视区域而言的
    function showLog(){
        console.log('window.pageXOffset--》'+window.pageXOffset);
        console.log('window.pageYOffset--》'+window.pageYOffset);
        console.log('window.scrollX--》'+window.scrollX);
        console.log('window.scrollY--》'+window.scrollY);
    }
    showLog();
    //3.测试方法(注意以下方法都是建立在窗口存在滚动条的情况下，否则无法滚动页面)
    function testScrollBy(){
        // 相对于当前视口向下滚动 100 像素
        window.scrollBy(0, 100);
        showLog();
    }
    function testScrollTo(){
        // 滚动到页面左上角
        window.scrollTo(0, 0);
        showLog();
    }
    function testScroll(){
        // 向下滚动到100位置，向右滚动到100位置
        window.scrollTo(100, 100);
        showLog();
    }
    //4.ScrollToOptions 字典，除了提供偏移值，还可以通过 behavior 属性告诉浏览器是否平滑滚动。
    function scrollToOptions(){
        let obj = {
            left:250,
            top:250,
            behavior:'smooth'//或者是 auto:正常滚动，smooth:平滑滚动
        }
        window.scrollTo(obj);
        showLog();
    }
</script>
</html>